<template>
  <el-drawer
    size="50%"
    title="添加标签"
    direction="rtl"
    :model-value="true"
    :before-close="handleCancel"
  >
    <div class="form-wrapper">
      <el-form
        class="custom-form"
        ref="form"
        :rules="rules"
        :model="form"
        label-width="120px"
        :disabled="readOnly"
      >
        <el-form-item label="组件名称" prop="name">
          <el-input
            class="custom-input custom-input-name"
            v-model.trim="form.name"
            type="text"
            maxlength="15"
            :show-word-limit="true"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="添加动作">
          <el-radio-group v-model="form.actionTypeEnum">
            <el-radio-button
              v-for="item in actionTypeEnumList"
              :key="item.id"
              :label="item.id"
              >{{ item.name }}</el-radio-button
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item label="标签" prop="tagCode">
          <el-select v-model="form.tagCode" filterable clearable placeholder="选择标签">
            <el-option
              v-for="item in tagList"
              :key="item.propertyKey"
              :label="item.propertyName"
              :value="item.propertyKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="值" prop="tagValue">
          <el-input
            class="custom-input custom-input-name"
            placeholder="请输入标签值"
            v-model.trim="form.tagValue"
            type="text"
            maxlength="15"
            :show-word-limit="true"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="过期时间">
          <el-date-picker
            v-model="form.expireTime"
            type="datetime"
            placeholder="选择日期"
          />
        </el-form-item>
   
      </el-form>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="validateNameForm">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>
import CustomerApi from "@/api/customerApi";
import { NodeDrawerDataModel } from "@/views/workTable/dataModel/NodeDrawerDataModel";
export default {
  props: {
    dialogData: {
      type: Object,
      default() {
        return {};
      },
    },
    addNodeEventData: {
      type: Object,
      default() {
        return {};
      },
    },
    readOnly: Boolean,
  },
  emits: ["confirm", "cancel"],

  data() {
    return {
      tagList: [],
      reachType: "8",

      form: {
        name: "添加标签",
        actionTypeEnum: "GENERATE",
        tagValue: "",
        tagCode: "",
        expireTime: "",
        // propertiesJson: [{ k: "", v: "" }],
      },
      actionTypeEnumList: [
        { id: "GENERATE", name: "生成" },
        { id: "COVER", name: "覆盖" },
        { id: "CUMULATIVE", name: "累加" },
        { id: "SUBTRACT", name: "累减" },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "请输入组件名称",
            trigger: "blur",
          },
        ],

        tagCode: [
          {
            required: true,
            message: "请选择标签",
            trigger: "blur",
          },
        ],
        tagValue: [
          {
            required: true,
            message: "请输入值",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    // debugger
    this.getAttributeList();
    if (this.dialogData && Object.keys(this.dialogData).length) {
      this.form = JSON.parse(this.dialogData.reachBody);
      this.form["name"] = this.dialogData.name;
      // let propertiesJson = []
      // let propertiesJsonObj = JSON.parse(this.dialogData.reachBody).propertiesJson
      // // 组装自己需要的数据
      // for (let i in propertiesJsonObj) {
      //   propertiesJson.push({
      //     k: i,
      //     v:  propertiesJsonObj[i],
      //   })
      // }
      // this.form.propertiesJson = propertiesJson
    }

    if (
      Object.keys(this.addNodeEventData).length &&
      this.addNodeEventData.graph &&
      this.addNodeEventData.cell
    ) {
      const { graph, cell } = this.addNodeEventData;
    }
  },

  methods: {
    setTag() {
      this.form.propertiesJson.push({ k: "", v: "" });
    },
    delTag(idx) {
      if (this.form.propertiesJson.length < 2) {
        ElMessage.warning("请至少保留一条");
        return;
      }
      this.form.propertiesJson.splice(idx, 1);
    },
    async getAttributeList() {
      let params = {
        currentPage: 1,
        showCount: -1,
      };
      let rs = await CustomerApi.attributeList(params);
      if (rs.code === 200) {
        this.tagList = rs.payload;
      }
    },
    validateNameForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleConfirm();
        } else {
          return false;
        }
      });
    },
    handleCancel() {
      this.$emit("cancel");
    },

    handleConfirm() {
      if (!this.form.name) {
        this.$message.warning("请填写组件名称");
        return;
      }

      let params = {
        reachType: this.reachType,
        name: this.form.name,
        reachBody: {
          actionTypeEnum: this.form.actionTypeEnum,
          tagValue: this.form.tagValue,
          tagCode: this.form.tagCode,
          expireTime: new Date(this.form.expireTime).getTime(),
        },
      };

      // this.form.propertiesJson.forEach(item => {
      //   params.reachBody.openTriggerProperTyChangeDto.propertiesJson[item.k] = item.v
      // });
      //
      params.reachBody = JSON.stringify(params.reachBody);
      this.$emit(
        "confirm",
        new NodeDrawerDataModel({
          dialogData: params,
        })
      );
      this.handleCancel();
    },
  },
};
</script>

<style scoped lang="scss">
.form-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}


.custom-form {
  width: 70%;
  flex: 1;
}


.close-button {
  margin: 5px 0 0 20px;
  height: 23px;
  width: 23px;
}

.el-select {
  width: 100%;
}
</style>
